﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />
<fmt:setLocale value="zh_CN" />

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  <title></title>
</head>

<body>
  <div class="container main-content welcome-container">
    
    <div class="welcome-head">
      <img alt="" src="${ctx.resource}/images/welcome/logo.png">
    </div>
    
    <div class="welcome-body">
      <div class="welcome-left">
        <img alt="" src="${ctx.resource}/images/welcome/image-left.png">
      </div>
      <div class="welcome-right">
        <img class="img" alt="" src="${ctx.resource}/images/welcome/image-right.png">
        
        <div class="qrcode-wrap">
          <div id="qrcode" class="qrcode"></div>
          <p class="qrcode-desc"></p>
        </div>
        
      </div>
    
    </div>
    
    <div class="signin-info hide">
      <div class="row">
        <div class="col-xs-4">
          <div class="info-group">
            <p class="info-title">学员&nbsp;&nbsp;|&nbsp;&nbsp;Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时间&nbsp;&nbsp;|&nbsp;&nbsp;Time</p>
            <p class="info studentName">张三</p>
            <p class="current-time" style="position: absolute; left: 50%; top: 35%;  font-size: 50px;  width: 300px;">${now}</p>
          </div>
          <div class="info-group clearfix">
            <div class="pull-left">
              <p class="info-title">教练&nbsp;&nbsp;|&nbsp;&nbsp;Trainer</p>
              <p class="info coachName">李四</p>
            </div>
            <img class="info-logo pull-left coachAvatar" src="${ctx.resource}/images/fitstart-logo.jpg" alt="" />
          </div>
          <div class="info-group">
            <p class="info-title">今日训练内容&nbsp;&nbsp;|&nbsp;&nbsp;Training</p>
            <p class="info training">背,肩,手臂</p>
          </div>
          <div class="info-group">
            <p class="info-title">累计上课&nbsp;&nbsp;|&nbsp;&nbsp;Duration</p>
            <p class="info duration">24&nbsp;<span style="">课时</span></p>
          </div>
        </div>
        <div class="col-xs-8">
          <div style="min-height: 100px;">
          <div class="target">
            <p style="font-size: 30px; text-align: center; margin: 0px;">目标完成情况</p>
            <!-- <p style="font-size: 24px; text-align: center; font-family: sans-serif; font-weight: 300;" class="target-desc">60天减10kg</p> -->
            <div class="clearfix">
              <div class="progress-left" style="text-align: right; padding-right: 15px;">
                <p style="margin: 5px 0 0 0;">入营时间<br /><span class="firstTime">2018-01-01</span></p>
              </div>
              <div class="target-progress" data-amount="80" data-name="">
                <div class="amount"></div>
              </div>
              <div class="target-progress-two" data-amount="80" data-name="" style="margin-top:20px;">
                <div class="amount-two"></div>
              </div>
              <div class="progress-right" style="text-align: left; padding-left: 15px;">
                <p style="margin: 5px 0 0 0;">结营时间<br /><span class="latestTime">2018-12-01</span></p>
              </div>
            </div>
          </div>
          </div>
          <div class="row">
            <div class="col-xs-4 total-stat">
              <p class="title">所有学员<br />累计总<span class="totalDesc">减脂</span>量</p>
              <p class="stat"><span id="totalReduce" class="totalReduce">780.6</span><span class="totalUnit" style="font-size: 20px;">kg</span></p>
            </div>
            <div class="col-xs-8">
              <div class="row">
                <div class="col-xs-6">
                  <div class="personal-stat" style="position:relative;">
                    <p style="margin:0;">个人贡献值</p>
                    <p style="margin:0;"><span class="personalReduce" style="font-size:40px;font-weight:bold;">0</span><span class="personalUnit">kg</span></p>
                    <img alt="" src="${ctx.resource}/images/welcome/welcome-icon-01.png" style="position:absolute;top:10px;right:20px;width:40px;">
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="signin-stat" style="position:relative;">
                    <p style="margin:0;">勤奋指数(打卡)</p>
                    <p style="margin:0;"><span class="finishHour" style="font-size:40px;font-weight:bold;">20</span><span>次</span></p>
                    <img alt="" src="${ctx.resource}/images/welcome/welcome-icon-02.png" style="position:absolute;top:10px;right:20px;width:40px;">
                    <!-- <p style="position: absolute; right: 20px; bottom: 5px;">已超越80%的学员</p> -->
                  </div>
                </div>
                <div class="col-xs-12 clearfix">
                  <div class="stars-title pull-left">学员表现&nbsp;&nbsp;|&nbsp;&nbsp;</div>
                  <div class="stars pull-left">
                    <ul class="clearfix">
                      <li class="pull-left star"></li>
                      <li class="pull-left star"></li>
                      <li class="pull-left star"></li>
                      <li class="pull-left star"></li>
                      <li class="pull-left star"></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="course-progress">
            <div class="pointer currentRank"></div>
            <ul class="clearfix">
              <li class="li-1 pull-left">
                <div></div>
              </li>
              <li class="li-2 pull-left">
                <div></div>
              </li>
              <li class="li-3 pull-left">
                <div></div>
              </li>
              <li class="li-4 pull-left">
                <div></div>
              </li>
              <li class="li-5 pull-left">
                <div></div>
              </li>
              <li class="li-6 pull-left">
                <div></div>
              </li>
              <li class="li-7 pull-left">
                <div></div>
              </li>
              <li class="li-8 pull-left">
                <div></div>
              </li>
              <li class="li-9 pull-left">
                <div></div>
              </li>
              <li class="li-10 pull-left">
                <div></div>
              </li>
            </ul>
            <div style="position: absolute; right: 0px; bottom: 0px; padding: 5px; border: 1px solid #ccc; border-radius: 5px;">课程进度：<span class="course-process">0</span>%</div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
  <%@ include file="/WEB-INF/include/footer.jsp"%>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  
  <d:resource root="${ctx.resource}/build" type="script" src="js/page/welcome.js">
    <script type="text/javascript">
      require(['page/welcome'] , function(page) {
        page.init({
          siteId: '${siteId}'
        });
      })
    </script>
  </d:resource>
</body>
</html>
